<template>
  <div class="detail">
    <div class="header">
      <span class="title">华夏黉</span>
      <span class="mores">...</span>
    </div>
    <div class="header-a"></div>
    <div v-for="items in goodsAttrs" :key="items.id" class="bigbox">
      <div class="swiper">
        <mt-swipe :auto="4000">
          <mt-swipe-item class="slide1" v-for="item in pic" :key="item.id">
            <img :src="item" class="imgs">
          </mt-swipe-item>
        </mt-swipe>
      </div>
      <div class="detailshop">
        <div class="detailshop-price">
          <span class="text"></span>
          ￥{{items.goodsAssPrice/100}}
          <span class="costprice">原价 ￥{{detaillist.goodsPrice}}</span>
        </div>
        <div class="detailshop-title">{{detaillist.goodsName}}{{detaillist.goodsIntro}}</div>
        <div class="detailshop-smalltitle">{{items.goodsAttrInfo}}</div>
        <div class="salesvolume">销量：{{items.buyNum}}</div>
        <div class="detailshop-more">运费：{{items.freight}}</div>
      </div>
      <div class="specifications">
        <div class="box" @click="choose()">
          <div class="specifications-choose">选择：规格</div>
          <div class="specifications-right">
            <img :src="images5" class="images5">
          </div>
        </div>
        <div class="mode">配送方式：快递</div>
      </div>
      <div class="shoplogo">
        <div class="box">
          <div class="box-left">11</div>
          <div class="logo-name">华夏黉</div>
          <div class="box-right">
            <img :src="images5" class="images5">
          </div>
        </div>
      </div>
      <div class="certification">
        <div class="iconsure">
          <span class="iconleft">
            <img :src="images6" class="images6">
          </span>
          <span class="sureright">企业认证</span>
        </div>
        <div class="iconsure">
          <span class="iconleft">
            <img :src="images6" class="images6">
          </span>
          <span class="sureright">企业认证</span>
        </div>
      </div>
      <!-- <div class="assemble">
        <div class="assemblepeople">
          <div class="people">1人正在拼单，可直接参与</div>
          <div class="lookmore">
            查看更多
            <img :src="images5" class="images5">
          </div>
        </div>
      </div> -->
      <!-- <div class="partake">
        <div class="left">
          <span class="heade"></span>
          <span class="name">溪溪而</span>
        </div>
        <div class="gobtn">
          <div class="time">
            <div class="time-top">还剩1人拼团成功</div>
            <div class="time-bottom">剩余00：00：00</div>
          </div>
          <button class="btn" @click="goassemble">去拼单</button>
        </div>
      </div> -->
      <!-- <div class="assemblerule">
        <div class="assemblerule-words">
          拼团规则:
          <span class="rule">开团或参团-人满发货-人不满退款</span>
        </div>
        <div class="assemblerule-icons">
          <img :src="images5" class="images5">
        </div>
      </div> -->
      <!-- <div class="evaluate">
        <div class="evaluate-title">
          <div class="evaluate-left">
            宝贝评价
            <span class="num">(1)</span>
          </div>
          <div class="evaluate-right">
            全部评价
            <img :src="images5" class="images5">
          </div>
        </div>
      </div>
      <div class="evaluatelist">
        <div class="evaluatelist-checkbox">
          <div class="evaluatelist-box">物流很快</div>
          <div class="evaluatelist-box">宝贝很好</div>
          <div class="evaluatelist-box">宝贝很好</div>
          <div class="evaluatelist-box">宝贝很好</div>
        </div>
        <div class="evaluatelist-detail">
          <div class="evaluatelist-heade">
            <span class="heade"></span>
            <span class="name">张三</span>
          </div>
          <div class="evaluatelist-artical">和图片看起来一样，宝贝很好看，物流也很快，下次还会继续购买</div>
        </div>
      </div> -->
      <div class="picture">
        <div class="shoppicture"></div>
      </div>
      <div class="explain">
        <div class="explain-title">价格说明</div>
        <div class="explain-details">
          <div class="explain-details-first">
            <span class="left">单独购买价：</span>
            <span class="right">是您单独购买商品的价格</span>
          </div>
          <!-- <div class="explain-details-first">
            <span class="left">发起拼单价：</span>
            <span class="right">是您拼单购买商品的价格</span>
          </div> -->
          <div class="explain-details-first">
            <span class="left">特别提示：</span>
            <span class="right">
              实际成交的价格可能因您使用优惠券等发生变化，最终以订单结
              算页的价格为准。若商家单独对价格进行说明的，以商家的表述为准。
            </span>
          </div>
        </div>
      </div>
       <dir class="blank"></dir>
      <!-- <div class="morelist">
        <div class="morelist-like">猜您喜欢</div>
        <div class="moregoods">
          <div class="goodsbox">
            <div class="goodsbox-top"></div>
            <div class="goodsbox-bottom">
              <div class="presenttitle">四时之序 手工胸针 细腻精巧</div>
              <div class="price">￥69.9</div>
              <div class="num">已售出65件</div>
            </div>
          </div>
          <div class="goodsbox">
            <div class="goodsbox-top"></div>
            <div class="goodsbox-bottom">
              <div class="presenttitle">四时之序 手工胸针 细腻精巧</div>
              <div class="price">￥69.9</div>
              <div class="num">已售出65件</div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="remarks">
            <span class="remarks-left">店铺主页</span>
            <span class="remarks-center">个人中心</span>
            <span class="remarks-center">关注我们</span>
            <span class="remarks-right">店铺信息</span>
          </div>
        </div>
      </div> -->

      <div class="goshoppingcart">
        <div class="goshoppingcart-cart">
          <div class="icons">
            <img :src="images7" class="images7">
          </div>
          <div class="iconstext" @click="gotocart">购物车</div>
        </div>
        <div class="enjoycart" @click="enjoycart">加入购物车</div>
        <div class="immediate-purchase" @click="purchase">立即购买</div>
        <!-- <div class="goassemble">发起拼团</div>
        <div class="goassemble-a"></div> -->
      </div>
      <mt-popup
        v-model="popupVisible"
        position="bottom"
        popup-transition="popup-fade"
        class="popup"
      >
        <div class="selection">
          <div v-for="(item,index) in value" :key="item.index">
            <div class="selectiontop">
              <div class="header"></div>
              <div class="title"></div>
              <div class="price">{{price}}</div>
              <div class="stock">库存：{{items.goodsNum}}</div>
            </div>
            <div class="specification">
              <div class="specificationtop">规格</div>
              <div class="specificationcenter">
                <div
                  class="specificationcenter-box"
                  :class="{active:index==isActive}"
                  @click="checkItem(index)"
                >{{item}}</div>
              </div>
            </div>
            <div class="buynumber">
              <div class="buynumber-left">购买数量</div>
              <div class="buynumber-title">
                <div class="buynumber-title-introduce">
                  <span class="left">
                    <span class="reduce" @click="reduceCartitem()"></span>
                  </span>
                  <input type="text" class="number" v-model="buyNum">
                  <span class="right">
                    <span class="add" @click="addCatitem(items.id)"></span>
                  </span>
                </div>
              </div>
            </div>
            <div class="enjoycart" @click.stop="addcart(items)">加入购物车</div>
            <div class="enjoycart-a"></div>
          </div>
        </div>
      </mt-popup>
      <mt-popup
        v-model="popupVisible2"
        position="bottom"
        popup-transition="popup-fade"
        class="popup"
      >
        <div class="selection">
          <div v-for="(item,index) in value" :key="item.index">
            <div class="selectiontop">
              <div class="header"></div>
              <div class="title"></div>
              <div class="price">{{price}}</div>
              <div class="stock">库存：{{items.goodsNum}}</div>
            </div>
            <div class="specification">
              <div class="specificationtop">规格</div>
              <div class="specificationcenter">
                <div
                  class="specificationcenter-box"
                  :class="{active:index==isActive}"
                  @click="checkItem(index)"
                >{{item}}</div>
              </div>
            </div>
            <div class="buynumber">
              <div class="buynumber-left">购买数量</div>
              <div class="buynumber-title">
                <div class="buynumber-title-introduce">
                  <span class="left" @click="reduceCartitem()">
                    <span class="reduce"></span>
                  </span>
                  <!-- <input type="text" class="number" v-model="buyNum"> 哪里有items 商品详情-->
                  <input type="text" class="number" v-model="buyNum">
                  <span class="right" @click="addCatitem(item)">
                    <span class="add"></span>
                  </span>
                </div>
              </div>
            </div>
            <div class="enjoycart" @click.stop="addcart2(items)">立即购买</div>
            <div class="enjoycart-a"></div>
          </div>
        </div>
      </mt-popup>
      <mt-popup
        v-model="popupVisible3"
        position="center"
        popup-transition="popup-fade"
        class="popup"
      >
        <div class="box33">
          <div class="titile">参与拼团</div>
          <div class="center">仅剩1个名额，19:22:06后结束</div>
          <div class="hreder"></div>
          <div class="btn">参与拼团</div>
        </div>
      </mt-popup>
    </div>
   
  </div>
</template>

<script>

import pic5 from "../../icons/right.png";
import pic6 from "../../icons/sure.png";
import pic15 from "../../icons/reduce.png";
import pic16 from "../../icons/add.png";
import pic7 from "../../icons/gouwucheicon.png";
import * as api from "../../request/api.js";
import { Toast } from "mint-ui";
export default {
  name: "Detail",
  data() {
    return {

      images5: pic5,
      images6: pic6,
      images7: pic7,
      images15: pic15,
      images16: pic16,
      isActive: -1,
      popupVisible: false,
      popupVisible2: false,
      popupVisible3: false,
      detaillist: {},
      pic: [],
      goodsAttrs: [],
      goodsAllSpec: [],
      id: "",
      data: [],
      buyNum: 0,
      price: ""
    };
  },
  created() {
    localStorage.setItem("id", this.$route.query.id);
    this.id = localStorage.getItem("id");

    //  this.data=data.split(',');
  },
  mounted() {
    this.$http
      .post(api.DETAIL, { id: this.id })
      .then(resp => {
        if (resp.data.success == true) {
          this.detaillist = resp.data.data;
          this.pic = JSON.parse(this.detaillist.goodsPic);
          this.goodsAttrs = resp.data.data.goodsAttrs;
          this.goodsAllSpec = JSON.parse(resp.data.data.goodsSpecInfo);
          this.goodsAllSpec.forEach(item => {
            this.value = item.value;
          });
          this.price = (resp.data.data.goodsTruePrice / 100).toFixed(2);
          console.log(resp.data.data);
        } else {
          return false;
        }
      })
      .catch(resp => {
        console.log(resp);
      });
  },
  methods: {
    gotocart(){
    this.$router.push({path:'./cart'})
    },
    checkItem(index) {
      this.isActive = index;
      var el = event.currentTarget.innerHTML;
      console.log(el);
    },
    goassemble() {
      console.log("aa");
      this.popupVisible3 = true;
    },
    enjoycart() {
      this.popupVisible = true;
    },
    purchase() {
      this.popupVisible2 = true;
    },
    choose() {
      this.popupVisible = true;
    },
  
    addcart(items) {
      const that = this;
      this.$http({
        method: "post",
        url: api.ADDCART,
         headers: { token: this.data.token },
        data: { buyNum: this.buyNum, goodsAttrId: items.goodsId }
      })
        .then(resp => {
       
          //执行到这一步应该没问题吧 没  这就说明添加成功了  你需要使用vuex改变页面数据   ==  我看一下 为什么名字重复 2种情况   不管你几种清情况  你都不能有相同的方法名  这样 它不知道是哪一个方法  就会使用第一个方法或者报错
          items.buyNum = that.buyNum;
          //那我在mutation在添加一个方法嘛  吧名字改一下  你试试  我只有十分钟了  一会吃饭
                  Toast({
          message: "已加入购物车"
        });
             this.popupVisible = false
          console.log(resp);
          console.log(this.data.token);
        })
        .catch(resp => {
          console.log(resp);
        });
    },
    addcart2(items) {
      const that = this;
      that.$http({
        method: "post",
        url: api.OFFPAY,
        headers: { token: this.data.token },
        data: { buyNum: this.buyNum, goodsAttrId: items.id }
      })
        .then(resp => {
       console.log(resp)
        items.buyNum = that.buyNum;
       if(resp.data.success==true){
            //        this.$http({
            //   method: "post",
            //   url: api.WEIXINCHATURL,
            //   data: {
            //     redirectUrl:
            //       (window.location.href).split('#')[0],
            //     userToken: JSON.parse(localStorage.getItem("token"))
            //   }
            // }).then(resp => {
            //   // console.log(resp.data.data);
            //   if (resp.data.success == true) {
            //     window.location.href = resp.data.data;
            //   }
            // });
     that.$router.push({
        path: "/payments",
        query: {
         datas: resp.data.data
        }
      });
       }
   
          // console.log(resp);
          // console.log(this.data.token);
        })
        .catch(resp => {
          // console.log(resp);
        });
 
    },
    reduceCartitem(items) {
      this.buyNum--;
      if (this.buyNum <= 0) {
        this.popupVisible = false;
        this.buyNum = 0;
      }
    },
    addCatitem(items) {
      //没传item
      this.buyNum++;
    },

  }
};
</script>

<style lang='less' scoped>
@import "../../less/detail.less";
</style>
<style lang='less' scoped>
.swiper {
  width: 100%;
  height: 340px;
}
.mint-swipe{
  width: 100%;
  height: 350px;
  position: relative;
  top:-104px;
}
.mint-swipe-item {
  height: 350px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
  background: #666666;
    img {
    width: 100%;
    height: 350px;
    object-fit: cover; 
  }
}
.mint-swipe-indicators {
  position: absolute;
  bottom: 10px !important;
  left: 50% !important;
  .mint-swipe-indicator {
    background-color: #ba251e !important;
    opacity: 0.2;
  }
  .is-active {
    background-color: red !important;
  }
}
</style>
